<template>
  <div class="page">
    <div class="top" v-if="isFooterTop">
      <slot name="top"></slot>
    </div>
    <div class="body"><slot name="body"></slot></div>
    <div class="footer" v-if="isSlotFooter"><slot name="footer"></slot></div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "Page",
  computed: {
    isFooterTop() {
      return Object.keys(this.$slots?.top || {}).length > 0;
    },
    isSlotFooter() {
      return Object.keys(this.$slots?.footer || {}).length > 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 135px);
  border-radius: 3px;
  .top {
    color: #606266;
    font-size: 13px;
    padding: 0 20px;
    margin: 0 -20px;
    margin-bottom: 15px;
    border-bottom: 10px solid #f0f2f5;
    ::v-deep .el-form-item__label {
      font-weight: normal;
    }
    ::v-deep .el-form-item {
      margin-bottom: 20px;
    }
  }
  // .body {
  // }
  .footer {
    text-align: right;
    padding: 15px 0;
  }
}
</style>
